<template>
  <div style="width: 100%">
    <div style="width: 250px; float: left">
      <a-card
        @contextDistrict.prevent=""
        size="small"
        class="eip-admin-card-small"
      >
        <div slot="title">
          <a-space>
            <a-button type="primary" @click="treeInit()"
              ><a-icon type="redo" />刷新</a-button
            >
            <a-button type="primary"
              ><a-icon type="fullscreen-exit" />折叠</a-button
            >
          </a-space>
        </div>
        <a-directory-tree
          :style="tree.style"
          :load-data="treeLoad"
          :tree-data="tree.data"
          @select="treeSelect"
        >
        </a-directory-tree>
      </a-card>
    </div>
    <div style="float: left; margin-left: 10px; width: calc(100% - 260px)">
      <a-card class="eip-admin-card-small" size="small">
        <div slot="title">
          <a-space>
            <a-button type="primary">
              <a-icon type="plus" />
              新增</a-button
            >
            <a-button type="primary"> <a-icon type="edit" />编辑</a-button>
            <a-button type="danger"><a-icon type="delete" />删除</a-button>
          </a-space>
        </div>
        <vxe-table
          ref="table"
          border
          resizable
          size="small"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }"
          :loading="table.loading"
          :height="table.height"
          :data="table.data"
        >
          <vxe-table-column
            type="checkbox"
            width="60"
            align="center"
          ></vxe-table-column>
          <vxe-table-column
            type="seq"
            title="序号"
            width="60"
          ></vxe-table-column>
          <vxe-table-column field="name" title="名称"> </vxe-table-column>
          <vxe-table-column
            field="districtId"
            title="代码"
            showOverflow="ellipsis"
          >
          </vxe-table-column>
          <vxe-table-column field="shortName" title="简称"> </vxe-table-column>
          <vxe-table-column field="cityCode" title="城市代码">
          </vxe-table-column>
          <vxe-table-column field="zipCode" title="邮编"> </vxe-table-column>
          <vxe-table-column field="lng" title="经度"> </vxe-table-column>
          <vxe-table-column field="lat" title="纬度"> </vxe-table-column>
          <vxe-table-column field="pinYin" title="拼音"> </vxe-table-column>
          <vxe-table-column
            field="isFreeze"
            title="禁用"
            align="center"
            width="80"
          >
            <template v-slot="{ row }">
              <a-switch :checked="row.isFreeze" />
            </template>
          </vxe-table-column>
          <vxe-table-column
            field="orderNo"
            title="排序"
            align="center"
            width="80"
          >
          </vxe-table-column>
        </vxe-table>
      </a-card>
    </div>
  </div>
</template>

<script>
import { tree, query } from "@/services/system/district/list";
export default {
  data() {
    return {
      tree: {
        style: {
          overflow: "auto",
          height: window.innerHeight - 194 + "px",
        },
        data: [],
      },
      table: {
        columns: [],
        loading: true,
        data: [],
        height: window.innerHeight - 194,
      },
    };
  },
  mounted() {
    this.treeInit(0);
    this.tableInit(0);
  },
  methods: {
    //初始化行政区划树
    treeLoad(treeNode) {
      const _this = this;
      return new Promise((resolve) => {
        if (treeNode.dataRef.children) {
          resolve();
          return;
        }
        // 没有值根据当前父节点获取下面子节点并挂在树节点中，添加到对应父节点的children中
        tree(treeNode.dataRef.key).then((result) => {
          treeNode.dataRef.children = result;
          _this.tree.data = [..._this.tree.data];
          resolve();
        });
      });
    },

    //初始化菜单树
    treeInit(id) {
      let _this = this;
      tree(id).then((result) => {
        _this.tree.data = result;
      });
    },

    //树点击
    treeSelect(keys) {
      let _this = this;
      _this.table.loading = true;
      query(keys).then((result) => {
        _this.table.data = result.data;
        _this.table.loading = false;
      });
    },

    //获取树图标
    treeIcon(props) {
      const { expanded } = props;
      if (props.children.length == 0) {
        return <a-icon type="file" />;
      }
      return <a-icon type={expanded ? "folder-open" : "folder"} />;
    },

    //初始化列表数据
    tableInit(id) {
      let _this = this;
      this.table.loading = true;
      this.table.page.param.filters = this.$refs.search.getFilters();
      query(id).then((result) => {
        _this.table.data = result.data;
        _this.table.loading = false;
      });
    },
  },
};
</script>
<style lang="less" scoped></style>